<template>
    <div class="sub-wrapper">
      <el-button type="primary" size="small" icon="el-icon-check" @click="startTask">开始同步</el-button>
      <el-button type="warning"  size="small" icon="el-icon-close" @click="endTask">停止同步</el-button>
    </div>
  <el-form ref="form" :model="header" size="small" label-width="80px" :inline="true" class="header">
    <div class="audit_icon iconfont" v-if="header.status === 'audit'"></div>
    <el-row>
      <el-col :span="6">
        <el-form-item label="单据编码">{{ header.billNo }}</el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="生产车间">{{ header.produceHouseName }}</el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="数量">{{ header.count }}</el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="开始时间">{{ header.startTime }}</el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="结束时间">{{ header.endTime }}</el-form-item>
      </el-col>
    </el-row>

    <br />
  </el-form>
  <el-form ref="form" :model="materialData" size="small" label-width="80px" :inline="true" class="header">
    <div class="audit_icon iconfont" ></div>
    <el-row>
      <el-col :span="6">
        <el-form-item label="物料编码">{{ materialData.materialNo }}</el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="物料名称">{{ materialData.materialName }}</el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="物料规格">{{ materialData.materialModel }}</el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <div class="traceBack">
    <span class="title">追溯信息,追溯数量{{traceCount}}</span>
    <el-table :data="traceBackNoList" height="calc(100vh - 325px)">
      <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
      <el-table-column prop="traceBack"></el-table-column>
    </el-table>
  </div>

  <div class="box">
    <span class="title">箱码信息</span>

      <el-table :data="dataList"  height="calc(100vh - 325px)"  @selection-change="selectChange"  >
        <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
        <el-table-column label="箱号" width="160" prop="boxNo"></el-table-column>
        <el-table-column label="批次" width="120" prop="batchNo"></el-table-column>
        <el-table-column label="箱码序号" width="120" prop="orderNum"></el-table-column>
        <el-table-column label="追溯码数量" width="120" prop="currentCount"></el-table-column>
        <el-table-column label="追溯码" prop="traceBack" width="100" align="center">
          <template #default="scope">
            <el-popover v-if="scope.row.traceBack && scope.row.traceBack.length > 0" placement="bottom" title="traceBack" :width="280" trigger="click" :content="arrTraceBack(scope.row.traceBack)">
              <template #reference>
                <el-tag type="success" style="cursor: pointer">已关联</el-tag>
              </template>
            </el-popover>
            <el-tag v-else type="warning">未关联</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="是否打印" width="120" >
          <template #default="scope">
            <el-tag :type="scope && scope.row && scope.row.noPrint === true? 'info': 'success'">{{scope && scope.row && scope.row.noPrint === true? '未打印': '已打印'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column>
          <template #default="scope">
            <el-button :disabled="scope && scope.row && scope.row.noPrint === true" type="success"  size="small" @click="printAgain(scope.$index, scope.row)">重新打印</el-button>
          </template>
        </el-table-column>
      </el-table>


  </div>

</template>

<script>

export default {
  name: "PDAprdCol",
  computed: {

  },
  data(){
    return{
      loading:false,
      input:'',
      dataList:[],//表格要展示的数据
      header:{},
      materialData:{},
      isShow:false,
      timeObject:null,
      traceCount:0,
      traceBackNoList:[]
      // timeNum:0,//用于关闭定时器
    }
  },
  async mounted() {
    let billNo = this.$route.query.billNo
    this.input = billNo
    if (billNo) {
      this.getTaskPda(billNo)
      this.getHeader(billNo)

    }
  },
  //离开当前页面时调用
  beforeRouteLeave(){
    window.clearInterval(this.timeObject)
    this.timeObject = null
  },
  // beforeDestroy() {
  //   //停止计时器
  //   window.clearInterval(this.timeObject)
  //   this.timeObject = null
  // },
  methods: {
    arrTraceBack(traceBack) {
      let arr = []
      if (traceBack.length !== 0) {
        for (let i = 0; i < traceBack.length; i++) {
          arr.push(traceBack[i].substring(traceBack[i].indexOf("Z")))
        }
        return arr
      } else {
        return traceBack
      }

    },
    //重新打印
    async printAgain(index,row){

      let param={
        id:row.id,
        boxNo : row.boxNo,
        billNo:this.input
      }
      let res = await this.callApi('save_task_no_print', param)
      if (!res.res){
        return
      }
      this.$message.success('修改成功')
    },
    //停止轮询
    endTask(){
      window.clearInterval(this.timeObject)
      this.timeObject = null
      this.$message.warning('停止已经同步')
    },
    
    //获取pda信息
     async getTaskPda(){
      try {
        let param={
          billNo:this.input
        }
        let res = await this.callApi('save_task_get_prd_col_list', param)
        if (!res.res) {
          return
        }
        this.dataList = res.data
        let traceBackList = []
        res.data.forEach((item)=>{
          traceBackList.push(item.traceBack)
        })
        let noList = []
        traceBackList.forEach((item)=>{
            item.forEach((i)=>{
              noList.push({'traceBack':i.substring(i.indexOf('Z'))})
            })
        })

        //反转追溯列表
        this.traceCount = noList.length
        this.traceBackNoList = noList.reverse()

      } finally {
        this.loading = false
      }
    },
    //开始定时刷新任务
    startTask(){
      if (this.timeObject){
        return
      }
      this.timeObject = setInterval(()=>{
        this.timeNum +=1;
        // this.getTaskPda()
        setTimeout(this.getTaskPda,0)
      },5000)
      this.$message.success('同步开始')
    },
    //展示头数据，生产任务相关信息
    async getHeader(){
      try {
        let param={
          billNo:this.input
        }
        let res = await this.callApi('get_prd_task_detail', param)
        if (!res.res) {
          return
        }
        this.isShow = true
        this.header = res.header
        this.materialData = res.data[0]
        // console.log(this.materialData)
      } finally {
        this.loading = false
      }
    }
  }


}
</script>

<style scoped>
.title{
  color: #0AB6E1;
}
.traceBack{
  float: right;
  width: 20%;
  margin-right: 200px;
}
.box{
  float: left;
  width: 50%;
  display: inline-block;
  margin-left: 50px;
  top: 20px;
}
</style>